<template>
    <view class="info-section bg-fff">
        <!-- 左侧品牌馆 -->
        <view class="brand-section">
            <view class="titleWrap flex bottom-10 top-3" @click="clickPinPai()">
                <view class="section-title font15 fontBold col-theme">品牌馆</view>
                <view class="more flex font10 col-grey">
                    <text class="right-3">更多</text>
                    <up-icon name="arrow-right" color="#8A8A8A" size="12"></up-icon>
                </view>
            </view>
            <view class="brand-card" @click="clickPinPai(detail.pinpai?.id)">
                <image class="brandImg" :src="detail.pinpai?.image[0]?.url" mode="widthFix"></image>
                <view class="brandTxt top-3 font13 col-3e">{{ detail.pinpai?.desc }}</view>
            </view>
        </view>

        <!-- 右侧最新信息 -->
        <view class="news-section">
            <view class="topWrap">
                <view class="section-header" @click="clickYouHui()">
                    <text class="col-EA3200 font15 fontBold">最新优惠信息</text>
                    <view class="more flex font10 col-grey">
                        <text class="right-3">更多</text>
                        <up-icon name="arrow-right" color="#8A8A8A" size="12"></up-icon>
                    </view>
                    <text class="hotTag col-fff font7 rotateUpLeft">New</text>
                </view>
                <view class="news-list font13 top-3 col-3e">
                    <view class="news-item" v-for="(item, index) in detail.discount_list" :key="index" @click="clickYouHui(item.id)">
                        <text>{{ item.title }}</text>
                    </view>
                </view>
            </view>

            <view class="centerWrap top-5" @click="toNewsList()">
                <view class="section-header">
                    <text class="col-theme font15 fontBold">快讯</text>
                    <view class="more flex font10 col-grey">
                        <text class="right-3">更多</text>
                        <up-icon name="arrow-right" color="#8A8A8A" size="12"></up-icon>
                    </view>
                </view>

                <view class="news-list font13 top-3 col-3e">
                    <view class="news-item txtHidden" v-for="(item, index) in newsList" :key="index">
                        <text>{{ item.title }}</text>
                    </view>
                </view>
            </view>

            <view class="bottomWrap top-5">
                <view class="section-header" @click="clickZhuanJia()">
                    <text class="col-theme font15 fontBold">专家评论</text>
                    <view class="more flex font10 col-grey">
                        <text class="right-3">更多</text>
                        <up-icon name="arrow-right" color="#8A8A8A" size="12"></up-icon>
                    </view>
                </view>

                <view class="zhuanjiaWrap top-5 flex" @click="clickZhuanJia(detail.zhuan?.id)">
                    <image class="personCard" :src="detail.zhuan?.image[0]?.url" mode="widthFix"></image>
                    <view class="commentWrap col-3e">
                        <view class="fontBold txtHidden font14" v-if="detail.zhuan?.department">{{ detail.zhuan?.department }}</view>
                        <text class="fontBold txtHidden font14 top-3" v-if="detail.zhuan?.name">{{ detail.zhuan?.name }}</text>
                        <view class="commentTxt font13 top-3">{{ detail.zhuan?.desc }}</view>
                    </view>
                </view>
            </view>
        </view>
    </view>
</template>

<script setup>
import { ref, computed } from "vue";

const props = defineProps({
  detail: {
    type: Object,
    default: () => {}
  }
});

//快讯
let newsList = computed(() => {
    return props.detail.tips?.slice(0, 2) || [];
})

//点击品牌
function clickPinPai(id) {
    if(id){
        uni.navigateTo({
            url: `/pages/tools/pin-pai/detail/index?detailId=${id}`
        })
    }else{
        uni.navigateTo({
            url: '/pages/tools/pin-pai/list/index'
        })
    }
}

//点击优惠信息
function clickYouHui(id) {
    if(id){
        uni.navigateTo({
            url: `/pages/tools/you-hui/detail/index?productId=${id}`
        })
    }else{
        uni.navigateTo({
            url: '/pages/tools/you-hui/list/index'
        })
    }
}

//点击专家评论
function clickZhuanJia(id) {
    if(id){
        uni.navigateTo({
            url: `/pages/tools/zhuan-jia/detail/index?detailId=${id}`
        })
    }else{
        uni.navigateTo({
            url: '/pages/tools/zhuan-jia/list/index'
        })
    }
}

// 跳转快讯列表
const toNewsList = () => {
    uni.navigateTo({
        url: '/pages/tools/news/news-list'
    })
}
</script>

<style lang="scss" scoped>
.info-section {
    display: flex;
    padding: 30rpx 20rpx;
    gap: 20rpx;

    .brand-section {
        width: 50%;
        padding: 10rpx;
        border-radius: 10rpx;
        background-image: linear-gradient(#DBEBE2 5%, #E8F2ED 30%, #ffffff 60%);
        .titleWrap{
            justify-content: space-between;
        }
        .brand-card {
            overflow: hidden;
            .brandImg {
                width: 100%;
                border-radius: 10rpx;
            }
            .brandTxt{
                line-height: 1.6;
                word-break: break-all;
                // text-overflow: ellipsis;
                // display: -webkit-box;
                // -webkit-box-orient: vertical;
                // -webkit-line-clamp: 7;
                // overflow: hidden;
            }
        }
    }
}

.news-section {
    width: 50%;
    .topWrap{
        // height: 190rpx;
        padding: 10rpx;
        border-radius: 10rpx;
        overflow: hidden;
        background-image: linear-gradient(#F6BDA9 5%, #FDF0E9 30%, #ffffff 60%);
    }

    .centerWrap{
        // height: 125rpx;
        padding: 10rpx;
        border-radius: 10rpx;
        overflow: hidden;
        background-image: linear-gradient(#DBEBE2 5%, #E8F2ED 30%, #ffffff 60%);
    }

    .bottomWrap{
        padding: 10rpx;
        border-radius: 10rpx;
        // height: 300rpx;
        overflow: hidden;
        background-image: linear-gradient(#B6D7C5 5%, #ECF5F0 30%, #ffffff 60%);
        .zhuanjiaWrap{
            gap: 20rpx;
            justify-content: space-between;
            align-items: flex-start;
            .personCard{
                width: 100rpx;
                border-radius: 6rpx;
            }
            .commentWrap{
                width: calc(100% - 120rpx);
                .commentTxt{
                    word-break: break-all;
                    text-overflow: ellipsis;
                    display: -webkit-box;
                    -webkit-box-orient: vertical;
                    -webkit-line-clamp: 2;
                    overflow: hidden;
                }
            }
        }
    }

    .section-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        position: relative;
        .hotTag{
            position: absolute;
            top: -10rpx;
            left: 176rpx;
            padding: 2rpx 9rpx 2rpx 10rpx;
            border-top-left-radius: 10rpx;
            border-top-right-radius: 10rpx;
            border-bottom-right-radius: 10rpx;
            background-color: #ED6163;
            border: 1rpx solid #FFFFFF;
            animation-duration: 1s;
            animation-delay: 1s;
            animation-iteration-count: infinite;
            animation-direction: alternate;
        }
    }

    .news-item {
        padding: 4rpx 0;
    }
}
</style>